<template>
  <div class="choose-cloud">
  <div class="nav-bar-wrap">
    <van-nav-bar  title="预约会议" left-text="返回" right-text="确认" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
  </div>
  <div class="title-tips">
    选择云会议室
  </div>
  <div class="van-cell van-hairline" style="">
        <div class="title-wrap">
          <van-checkbox v-model="checkedMy" @change="changeCheck('checkedMy')"></van-checkbox>
        </div>
        <div class="mid-wrap">
          <span class="van-cell-text name-wrap">我的云会议室</span>
        </div>
        <div class="status">
          <span></span>
        </div>
    </div>
    <van-cell-group>
        <div class="van-cell van-hairline">
          <div class="title-wrap">
            <van-checkbox v-model="checkedPublic" @change="changeCheck('checkedPublic')"></van-checkbox>
          </div>
          <div class="mid-wrap">
            <span class="van-cell-text name-wrap">公共云会议室号</span>
          </div>
          <div class="status">
            <span><input type="text" placeholder="输入会议室号" class="input-ele" v-model="roomNum"></span>
          </div>
        </div>
        <div class="van-cell van-hairline choose-wrap" @click="goChoose">
          <div class="mid-wrap">
            <span class="van-cell-text name-wrap">从云会议室列表添加</span>
          </div>
          <div class="status">
            <i class="van-icon van-icon-arrow van-cell__right-icon van-cell__right-icon--right"></i>
          </div>
        </div>
    
    </van-cell-group>
  </div>
</template>

<script>
import api from '../../api/meeting.api.js'
import {
  Search,
  Cell,
  CellGroup,
  Checkbox,
  CheckboxGroup,
  Card,
  icon,
  Row,
  Col,
  Toast,
  NavBar,
  SubmitBar
} from 'vant'
export default {
  components: {
    [Search.name]: Search,
    [CellGroup.name]: CellGroup,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Card.name]: Card,
    [Cell.name]: Cell,
    [icon.name]: icon,
    [Row.name]: Row,
    [Col.name]: Col,
    [Toast.name]: Toast,
    [SubmitBar.name]: SubmitBar,
    [NavBar.name]: NavBar
  },
  data() {
    return {
      peopleLength:0,
      groupLength:0,
      roomNum:'',
      cannotMy:false,
      cannotPublic:false,
      checkedMy:false,
      checkedPublic:false,
      checked: false,
    }
  },
  methods: {
    changeCheck(val){
      if(this.checkedMy && this.checkedPublic){
          if(val === 'checkedMy'){
            this.checkedPublic = false
          }else{
            this.checkedMy = false
          }
      }
    },
    onClickLeft(){
      this.$router.push({name:'appointment'})
    },
    onClickRight(){
     
    },
    goChoose(){
      this.$router.push({name:'choose-list'})
    },
    onSubmit() {}
  }
}
</script>

<style scoped lang='less'>
.choose-cloud {
  //padding: 10px;
  .choose-wrap{
    padding-left:33px; 
  }
  .input-ele{
    text-align: right
  }
  .title-tips{
   margin-top:65px;
   font-size: 10px;
   color: #6E6E70;
   padding: 0 0 2px 16px;
  }
  .choose-tips {
    color: #3580e7;
    font-size: 14px;
    padding: 0 0 0 10px;
  }
  .title-wrap {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .mid-wrap {
    -webkit-box-flex: 6;
    -webkit-flex: 6;
    flex: 6;
  }
  .status {
    text-align: right;
    -webkit-box-flex: 6;
    -webkit-flex: 6;
    flex: 6;
    span {
      color: #939398;
    }
  }

  .check-wrap {
    display: inline-block;
    width: 40px;
    text-align: center;
  }
  .name-wrap {
    padding-left: 5px;
  }
  .img-wrap {
    display: inline-block;
    float: left;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: relative;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #eee;
  }
  .card-goods {
  }
}
</style>